import React, { ReactNode } from "react";

interface Props {
  // 控制弹框是否渲染
  isOpen: boolean;
  // 弹框标题
  title: string;
  // 弹框提示内容
  children: ReactNode;
  // 关闭弹框的方法
  close: () => void;
  // 点击取消按钮时执行的方法
  onCancelButtonClicked: () => void;
  // 点击确定按钮时执行的方法
  onSureButtonClicked: () => void;
}

export default class confirm extends React.Component<Props> {
  // 默认值
  static defaultProps = {
    title: "温馨提示",
    onCancelButtonClicked: () => {},
    onSureButtonClicked: () => {},
  };
  render() {
    const {
      title,
      children,
      isOpen,
      close,
      onCancelButtonClicked,
      onSureButtonClicked,
    } = this.props;
    return isOpen ? (
      <div className="modal is-active">
        <div
          className="modal-background"
          style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
        ></div>
        <div className="modal-card">
          <header className="modal-card-head">
            {/* 确认框标题 */}
            <p className="modal-card-title">{title}</p>
            {/* 关闭确认框按钮 */}
            <button
              className="delete"
              onClick={() => {
                close();
                onCancelButtonClicked();
              }}
            ></button>
          </header>
          {/* 确认框主体区域 */}
          <section className="modal-card-body">{children}</section>
          <footer className="modal-card-foot">
            {/* 确认框确定按钮 */}
            <button
              className="button is-success"
              onClick={() => {
                close();
                onSureButtonClicked();
              }}
            >
              确定
            </button>
            {/* 确认框取消按钮 */}
            <button
              className="button is-info"
              onClick={() => {
                close();
                onCancelButtonClicked();
              }}
            >
              取消
            </button>
          </footer>
        </div>
      </div>
    ) : null;
  }
}
